<template>
  <div class="bussiness">
    <header-bar title="出差审批"></header-bar>
    <content-scroll>
      <ul>
        <list-item 
          v-for="(item, index) in bussinessList" 
          :key="index"
          :title="item.title"
          @click.native="showDetail">
          <div>申请人: {{item.submittor}}</div>
          <div>{{item.date}}</div>
        </list-item>
      </ul>
    </content-scroll>
    <transition name="slide">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar'
  import ContentScroll from '@/components/ContentScroll'
  import ListItem from '@/components/ListItem'

  export default {
    components: {
      HeaderBar,
      ContentScroll,
      ListItem
    },
    data(){
      return {
        bussinessList: [
          {
            title: '2017-11-29日武汉会议出差申请',
            submittor: '赵欢',
            date: '2017-11-20'
          },
          {
            title: '2017-11-29日武汉会议出差申请',
            submittor: '赵欢',
            date: '2017-11-20'
          },
          {
            title: '2017-11-29日武汉会议出差申请',
            submittor: '赵欢',
            date: '2017-11-20'
          },
          {
            title: '2017-11-29日武汉会议出差申请',
            submittor: '赵欢',
            date: '2017-11-20'
          }
        ]
      }
    },
    methods: {
      showDetail(){
        this.$router.push({
          name: 'bussinessDtail'
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .child-view{
    position: absolute;
    z-index: 500;
    top:0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .slide-enter, .slide-leave-active{
    transform: translate3d(100%, 0, 0);
  }
</style>

